<%@page import="com.blog.bean.Blog"%>
<%@page import="com.blog.bean.Discuss"%>
<%@page import="java.util.List"%>
<%@page import="com.blog.bean.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	User user = (User)session.getAttribute("loginUser");
 	int id = Integer.parseInt(request.getParameter("id"));
	User publisherUser = (User)session.getAttribute("blog_publisher_"+id);
	Blog blog = (Blog)session.getAttribute("blog_"+id);
	String contenturl = blog.getContenturl();
	 
	int praise = Integer.parseInt(session.getAttribute("blog_praise_"+id).toString());
	int record = Integer.parseInt(session.getAttribute("blog_record_"+id).toString());
	List<Discuss> discuss =  (List<Discuss>)session.getAttribute("blog_discuss_list_"+id);
	List<Blog> historyBlogs = (List<Blog>)session.getAttribute("history_blog");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MyBlog</title>
	<link rel="stylesheet" href="source/css/wangEditor.min.css">  
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="source/css/bootstrap.min.css" >
	<link rel="stylesheet" href="source/css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="source/css/htmleaf-demo2.css">
	<link rel="stylesheet" href="source/css/style_index.css"> <!-- Resource style -->
	<script src="source/js/modernizr.js"></script> <!-- Modernizr -->
	
	<script type="text/javascript" src="source/js/jquery-3.4.1.js"></script>
	 

	<style type="text/css">
		.glyphicon { margin-right:5px; }
		.btn-wrapper{
			padding: 1em 0;
		}
		.thumbnail
		{
		    margin-bottom: 20px;
		    padding: 0px;
		    -webkit-border-radius: 0px;
		    -moz-border-radius: 0px;
		    border-radius: 0px;
		}

		.item.list-group-item
		{
		    float: none;
		    width: 100%;
		    background-color: #fff;
		    margin-bottom: 10px;
		}
		.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
		{
		    background: #428bca;
		}

		.item.list-group-item .list-group-image
		{
		    margin-right: 10px;
		}
		.item.list-group-item .thumbnail
		{
		    margin-bottom: 0px;
		}
		.item.list-group-item .caption
		{
		    padding: 9px 9px 0px 9px;
		}
		.item.list-group-item:nth-of-type(odd)
		{
		    background: #eeeeee;
		}

		.item.list-group-item:before, .item.list-group-item:after
		{
		    display: table;
		    content: " ";
		}

		.item.list-group-item img
		{
		    float: left;
		}
		.item.list-group-item:after
		{
		    clear: both;
		}
		.list-group-item-text
		{
		    margin: 0 0 11px;
		}
	</style>
	
</head>
<body> 
<input id="url" type="hidden" value="<%=contenturl %>">
<input id="blogid" type="hidden" value="<%=blog.getId() %>">
	<script type="text/javascript"> 
	$(document).ready(function(){ 
		
		$("#content_blog").load($("#url").val()); 
		//评论
		$("#bt_send").click(function(){
			var content = $("#text_msg").val(); 
			var htmlVal = "<li><a class='image-wrapper' href=''#0'><img src='source/img/user.png' alt='News image'></a>"+
				"<h4><a class='cd-nowrap' href='#d'>用户："+"我"+"</a></h4>"+
				"<p>&nbsp;&nbsp;&nbsp;&nbsp;"+content+"</p>"+
				"<time style='float:right;'>2020-06-09 12:00:52</time><h6 class='deleteit'>"+
				"<a  href='#0'><time>删除</time></a>"+
				"</h6></li><hr>"; 
				
				//格式化日期
			Date.prototype.Format = function (fmt) {
				    var o = {
				        "M+": this.getMonth() + 1, //月份
				        "d+": this.getDate(), //日
				        "H+": this.getHours(), //小时
				        "m+": this.getMinutes(), //分
				        "s+": this.getSeconds(), //秒
				        "q+": Math.floor((this.getMonth() + 3) / 3), 
				        "S": this.getMilliseconds() //毫秒
				    };
				    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				    for (var k in o)
				    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				    return fmt;
				}
			var nowDate = new Date().Format("yyyy-MM-dd HH:mm:ss");  
			if(content == ""){
				alert("发送消息不能为空！")
			}else{
				//保存评论
				$.post("addDiscuss",{
					objectid:$("#blogid").val() ,
					content: content,
					time:nowDate
					},
					function(data,status){
						
						
					
				});
					
				$("ul.ul_discuss").append(htmlVal);
				$("#text_msg").val("");
				
			}
			
		});
		//删除新增评论
		$(document).on('click', '.deleteit', function() {
			$(this).parents("li").hide(); 
			$(this).parents("li").next().hide(); 
			
			//$.post("deleteDiscuss",{
				//id:$(this).parents("li").children("input.reid").val() 
				//},
				//function(data,status){	
		//});
	    });
		//查询blog
	    $("#a_search").click(function(){
	    	var type = $("#type_select option:selected").val();
	    	var title = $("#search_input").val();
	    	if(title == ""){ 
	    		
	    	}else{
	    		window.location.href="searchBlog?type="+type+"&title="+title; 
	    	}
	    	
	    	
	    	
	    });
		//删除原有评论
		$(".delete_a_discuss").click(function(){
			$(this).parents("li").hide(); 
			$(this).parents("li").next().hide(); 
			$.post("deleteDiscuss",{
				discussid:$(this).parents("li").children("input.discuss_input_id").val() 
				}, 
				function(data,status){
			});
			
		});
		//举报博客
		$("#jb_button").click(function(){
			var id = $("#blog_id").val();
			var reason = $("#jb_blog_reason").val();
			if(reason=="")alert("举报原因不能为空！")
			else{
				alert("成功提交举报：文章id："+id+";"+"举报原因："+reason);
				$('#dismiss_model').trigger("click");
			}
			
			/*
			$.post("addComplaint",{
				id:$(this).parents("li").children("input.reid").val() 
				},
				function(data,status){
					
					
				
			});*/
		});
		
		//关注
		$("#bt_attention").click(function(){
			
		});
		 
		
		//删除记录
	    $(".deleteRecord").click(function(){
	    	$(this).parents("li").hide();
	    	$.post("deleteRecord",{
				id:$(this).parents("li").children("input.reid").val() 
				},
				function(data,status){
					
					
				
			});
	    	
	    });
        
	});
	</script>
	
	<header class="cd-main-header animate-search" >
		<div class="cd-logo">
		<a href="index"><img height="45px" src="source/img/logo.svg" alt="myblog首页"></a>
		
		</div>

		<nav class="cd-main-nav-wrapper">
			<a id="a_search" href="#search" class="cd-search-trigger cd-text-replace">Search</a>
			
			<ul class="cd-main-nav">
				<li><a href="#0">最新</a></li>
				<li><a href="#0">最热</a></li>
				<li><a class="disabled">||</a></li>
				<li><a href="searchBlog?type=java">java</a></li>
				<li><a href="searchBlog?type=python">python</a></li>
				<li><a href="searchBlog?type=php">php</a></li>
				<li><a href="searchBlog?type=移动开发">移动开发</a></li>
				<li><a href="searchBlog?type=大数据">大数据</a></li>
				<li><a href="searchBlog?type=物联网">物联网</a></li>
				<li><a class="disabled">||</a></li>
				<%
					if(user == null){
						out.print("<li><a  href='login'>登录/注册</a></li>");
						
					}else{
						
						out.print("<li><div class='btn-group'><button type='button' class='btn btn-info dropdown-toggle' data-toggle='dropdown'  >"+
								user.getName()+"<span class='caret'></span></button><ul class='dropdown-menu'><li><a href='userBlog'>我的主页</a></li><li><a href='createBlog'>创做中心</a></li>"+
								"<li><a href='#'>我的圈子</a></li> <li role='separator' class='divider'></li><li><a href='removeLogin'>退出登录</a></li>"+
								" </ul></div></li>");
						
					}
				%>
			</ul> <!-- .cd-main-nav -->
		</nav> <!-- .cd-main-nav-wrapper -->

		<a href="#0" class="cd-nav-trigger cd-text-replace">Menu<span></span></a>
	</header>
	
	<main style="background-color:#62AFFE;" >
		
		
		
		<!-- 博客举报信息填写 -->
		
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">举报博客：<%=blog.getTitle()+"(id="+blog.getId()+")" %></h4>
		      </div>
		      <div class="modal-body">
		        <p>
				
					<table>
						<tr><td>举报原因：</td><td><input id="jb_blog_reason" type="text"><input id="blog_id" type="hidden" value="<%=blog.getId() %>"></td></tr>
						
					</table>
				
				</p>
		      </div>
		      <div class="modal-footer">
		        <button id="dismiss_model" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" id="jb_button">提交</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- 评论举报信息填写 -->
		
		<div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">举报用户</h4>
		      </div>
		      <div class="modal-body">
		        <p>
				
					<table>
						<tr><td>举报评论：</td><td>****</td></tr>
						<tr><td>举报原因：</td><td><input type="text"></td></tr>
					</table>
				
				</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary">提交</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
		
		<!-- your content here -->
		
		<div> 
			<div style=" position: relative;float:left;background-color:#62AFFE;width:340px;height:100%;" >
				
				<table class="table table-condensed">
					<tr align="center" class="active"><th></th><th></th><th><img width="50px" alt="用户" src="source/img/user.png" ><br></th><th></th><th></th></tr>
					<tr align="center" class="active"><th></th><th></th><th><%=publisherUser.getUsername() %></th><th></th><th></th></tr>
					
					<tr align="center">
					  <td class="danger">博客</td>
					  <td class="success">粉丝</td>
					  <td class="warning">评论</td>
					  <td class="danger">访问</td>
					  <td class="info">收藏</td>
					</tr> 
					<tr align="center"> 
					  <td class="danger">10</td>
					  <td class="success">22</td>
					  <td class="warning">66</td>
					  <td class="danger">55</td>
					  <td class="info">55</td> 
					</tr>  
					<tr class="active"><th><a href="otherBlog?id=<%=publisherUser.getId()%>">
					<button type="button" class="btn btn-warning">Ta的主页</button>
					</a></th><th></th><th></th><th></th><th>
					<% if(user!= null)if(user.getId() != publisherUser.getId())out.print("<button id='bt_attention' type=\"button\" class=\"btn btn-danger\">关注Ta</button>"); %>
					</th></tr>
				</table>
				<br/>
	
			
			</div>
			
			<div style="float:right;">
			
				<div style="background-color:#62AFFE; width:100%;text-align:center;">
					<div class="jumbotron">
						<h1 style="back ; color:red;"><%=blog.getTitle() %></h1> 
						<br> 
						<h4><%=blog.getDescribe() %> </h4> 
						<br>
						<br>
						<div>
			                <span  class="glyphicon glyphicon-thumbs-up"><%=praise %></span>
							<span  class="glyphicon glyphicon-eye-open"><%=record %></span>
							<span  class="glyphicon glyphicon-comment"><%=discuss.size() %></span>
		                </div>
		                <br>
			
			
							<button type="button" class="btn btn-primary btn-warning " data-toggle="modal" data-target="#myModal">
							  举报违规
							</button>
							<button type="button" class="btn btn-info  "">
							  收藏
							</button>
			 
					</div> 
					  
					<p style="background-color:#fff;"></p> 
					
				</div>
				 
				<div class="container" style="height:100%; background-color:#62AFFE;">
				
				 
					<div id="content_blog" style="padding:20px,20px; background-color:#fff;width:100%; margin-top:20px; margin-left:auto;margin-right:auto;">
					<br> 
					</div>
					
					<div>
						<!-- 评论 -->
						<br>
						<hr height="20px"/>
						<br>
						<a href="#0" style="color:#fff; ">评论区：<span class="badge"><%=discuss.size() %></span></a> 
						<textarea id="text_msg" class="form-control "  <%=(user==null)?"disabled='disabled'":"" %>  placeholder='<%=(user==null)?"登录后才能评论！":"快来说说你的看法吧！" %>'  rows="3"></textarea>
						<br>
						<div style="margin-right:auto; margin-left:auto;" >
							<button id="bt_send" type="button" <%=(user==null)?"disabled='disabled'":"" %>  class="btn btn-success">发送消息</button>
						</div>
						 
						<div class="cd-search-suggestions" style="position: relative; width:100%; margin-left:auto;margin-right:auto; "> 
						<div class="news">
						<ul class="ul_discuss"> 
						<% if(discuss != null)for(int i =0;i<discuss.size();i++){ %>
							<li><input class="discuss_input_id" type="hidden" value="<%=discuss.get(i).getId() %>">
								 
								<a class="image-wrapper" href="#0"><img src="source/img/user.png" alt="News image"></a>
								<h4><a class="cd-nowrap" href="otherBlog?id=<%=discuss.get(i).getUserid() %>">用户：<%=discuss.get(i).getUserid() %></a></h4>
								<p>&nbsp;&nbsp;&nbsp;&nbsp;<%=discuss.get(i).getContent() %></p>
								<time style="float:right;"><%=discuss.get(i).getTime() %></time> 
								<h6><a href="#0"><time>回复</time></a>&nbsp;&nbsp;&nbsp;&nbsp;
									<% if(user != null && user.getId() == discuss.get(i).getUserid()) {%>
									<a class="delete_a_discuss" href="#0"><time>删除</time></a>
									<% }else{ %> 
									<a  data-toggle="modal" data-target="#myModal2" ><time>举报</time></a>
									<% } %>
									
								</h6>
								
								
								
							</li>
							<hr>
							<%} %>
							
							
						</ul> 
						</div>
						</div> 
						<br id="add">
						<br><br><br><br>
					</div>
				
				</div>
			
			
				<div class="related" style="height:150px; postion:fixed;bottom:0;  ">
		    		<h4>MyBlog</h4> 
		    
				</div>
			
			</div>
			
			
			
		
		
		</div>
		
			
		
		
		
		
	</main>

	<div id="search" class="cd-main-search">
		<form>
			<input id="search_input" type="search" placeholder="查找博客">

			<div class="cd-select">
				<span>类型</span>
				<select id="type_select" name="type">
					<option value="">所有类型</option>
					<option value="java">java</option>
					<option value="python">python</option>
					<option value="php">php</option>
					<option value="移动开发">移动开发</option>
					<option value="大数据">大数据</option>
					<option value="物联网">物联网</option>
					<option value="其他">其他</option>
				</select>
				<span class="selected-value">所有类型</span>
			</div>
		</form>

		<div class="cd-search-suggestions">
			<div class="news">
				<h3>最近查看（最多显示5条）</h3>
				<ul>
					<% if(historyBlogs != null)for(int i = 0;i<historyBlogs.size();i++){%>
					<li>
						<input class="reid" type="hidden" value="<%=historyBlogs.get(i).getId() %>">
						<a class="image-wrapper" href="#0"><img src="source/img/user.png" alt="News image"></a>
						<h4><a class="cd-nowrap" href="showBlog?id=<%=historyBlogs.get(i).getId() %>"><%=historyBlogs.get(i).getTitle() %></a></h4>
						<time datetime="2020-06-08 21:59:00"><%=historyBlogs.get(i).getCreatedate() %></time>
						<h6 class="deleteRecord"><a href="#0"><time datetime="2016-01-12">删除记录</time></a></h6>
					</li>
					<% }  %> 
				</ul>
			</div> <!-- .news -->

			<div class="quick-links">
				<h3>更多</h3>
				<ul>
					
					<li><a href="#0">查看所有记录</a></li>
				</ul>
			</div> <!-- .quick-links -->
		</div> <!-- .cd-search-suggestions -->

		<a href="#0" class="close cd-text-replace">Close Form</a>
	</div> <!-- .cd-main-search -->
	<div class="cd-cover-layer"></div> <!-- cover main content when search form is open -->


	
	<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	
	
	<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="source/js/Carousel.js"></script> 
	<script type="text/javascript">
		$(function(){
			Carousel.init($("#carousel"));
			$("#carousel").init();
		});
	</script>
	<!-- <script src="js/jquery-2.1.1.min.js"></script> --> 
	
	<script src="source/js/main.js"></script> <!-- Resource jQuery -->
	<script src="source/js/bootstrap.min.js"></script>
	
</body>
</html>